import { reactive, ref, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { supermapReady } from '/@packages/components'

export default function () {
  const activeTabName = ref('cloud')
  const onTabClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  const { $myapp } = supermapReady()
  //#region  体积云开始
  const voloumtricCloudsOptions = reactive({
    useVolumeCloud: false,
    useHighCloud: false,
    renderQualityType: SuperMap3D.VolumetricCloudsQuality.Middle,
    renderQualityOption: [
      { label: '高等', value: SuperMap3D.VolumetricCloudsQuality.High },
      { label: '普通', value: SuperMap3D.VolumetricCloudsQuality.Middle },
      { label: '低等', value: SuperMap3D.VolumetricCloudsQuality.Low }
    ],
    thickness: 8000,
    coverage: 0.5,
    speed: 50.0,
    direction: 0.0
  })
  watch(
    () => voloumtricCloudsOptions,
    () => {
      const volumetricClouds = $myapp.viewer.scene.volumetricClouds
      if (voloumtricCloudsOptions.useVolumeCloud) {
        volumetricClouds.enabled = true
        volumetricClouds.cirrusEnabled = Boolean(
          voloumtricCloudsOptions.useHighCloud
        )
        volumetricClouds.quality = Number(
          voloumtricCloudsOptions.renderQualityType
        )
        volumetricClouds.thickness = Number(voloumtricCloudsOptions.thickness)
        volumetricClouds.shapeCoverage = Number(
          voloumtricCloudsOptions.coverage
        )
        volumetricClouds.windSpeed = Number(voloumtricCloudsOptions.speed)
        volumetricClouds.windHeading = Number(voloumtricCloudsOptions.direction)
      } else {
        volumetricClouds.enabled = false
      }
    },
    {
      deep: true
    }
  )
  //#endregion 体积云结束

  //#region 高度雾开始
  // 高度雾初始化变量
  const fogOptions = reactive({
    useFog: false,
    density: 0.15,
    decay: 0.2,
    color: 'rgba(255,255,255,1)'
  })
  watch(
    () => fogOptions,
    () => {
      const fog = $myapp.viewer.scene.fog
      if (fogOptions.useFog) {
        $myapp.viewer.scene.globe.enableLighting = true // 地形和大气启用光照
        $myapp.viewer.scene.highDynamicRange = true // 建议打开高动态光照效果更好
        fog.enabled = true // 开启
        fog.density = Number(fogOptions.density) // 设置密度
        fog.heightFalloff = Number(fogOptions.decay) // 设置衰减
        fog.color = SuperMap3D.Color.fromCssColorString(fogOptions.color) // 设置颜色
      } else {
        fog.enabled = false
      }
    },
    {
      deep: true
    }
  )
  //#endregion 高度雾结束

  //#region 丁达尔效应开始
  const lightShaftOptions = reactive({
    useLightShaft: false
  })
  watch(
    () => lightShaftOptions,
    () => {
      if (lightShaftOptions.useLightShaft) {
        // 设置时间：丁达尔效应常出现于清晨、日落
        const time = SuperMap3D.JulianDate.fromIso8601(
          '2025-04-14T22:14:01.41501564129430335Z'
        )
        $myapp.viewer.clock.currentTime = time.clone()
        $myapp.viewer.scene.postProcessStages.lightShaft.enabled = true
        // $myapp.viewer.scene.hdrEnabled = true
      } else {
        $myapp.viewer.scene.postProcessStages.lightShaft.enabled = false
        // $myapp.viewer.scene.hdrEnabled = false
        const time = SuperMap3D.JulianDate.fromDate(new Date())
        $myapp.viewer.clock.currentTime = time.clone()
      }
    },
    { deep: true }
  )
  //#endregion 丁达尔效应结束
  return {
    activeTabName,
    onTabClick,
    voloumtricCloudsOptions,
    fogOptions,
    lightShaftOptions
  }
}
